<template>
  <scroll-view :scroll-y="true" class="sidebar-container">
    <view class="pd40">
      <view class="logo" @click="toPage({ path: '/pages/home/index' })">
        <image mode="heightFix" src="@/static/icon/logo.png" />
      </view>
      <view class="user-panel">
        <view class="icon">
          <image  v-if="state?.userInfo.avatar" :src="state?.userInfo.avatar" />
          <image mode="heightFix" v-else src="@/static/icon/head.png" />
        </view>
        <view class="content">
          <view class="top">
            {{ state?.userInfo.phoneNo }}
            <image mode="heightFix" :src="`/static/icon/vip${state?.userInfo.level}.png`"  />
          </view>
          <view class="bottom">My Invite code:<text>{{ state?.userInfo.inviteCode }}</text> <wd-icon name="file-copy" size="32rpx"
              @click="handleCopy"></wd-icon>
          </view>
        </view>
      </view>
      <view class="progress-panel">Credit Score <wd-progress custom-class="progress" :percentage="state?.userInfo.credit"
          color="#670cd6" :duration="5"></wd-progress>
      </view>
      <view class="balance-panel">
        <view class="item" @click="toPage({ path: '/pages/mine/records' })">
          <view class="num">USDC {{ formatAmount(state?.userInfo.rebate || 0) }}</view>
          <view class="name">Commission</view>
        </view>
        <view class="item" @click="toPage({ path: '/pages/mine/finance' })">
         <view class="num">USDC {{ formatAmount(String((state?.userInfo.balance - state?.userInfo.freezeBalance) || 0)) }}</view>
          <view class="name" @click.stop="refreshBalance">Total Balance <wd-icon name="refresh" size="20rpx"></wd-icon></view>
        </view>
      </view>
      <view class="app-panel">
        <view class="item" v-for="item in appList" :key="item.name" @click="toPage(item)">
          <view class="icon">
            <image mode="widthFix" :src="item.icon" />
          </view>
          <view class="name">{{ item.name }}</view>
        </view>
      </view>
      <view class="list-panel">
        <view class="mode" v-for="item in modeList" :key="item.title">
          <view class="title">{{ item.title }}</view>
          <view class="list">
            <view class="item" v-for="subItem in item.list" :key="subItem.name" @click="toPage(subItem)">
              <view class="icon">
                <image mode="widthFix" :src="subItem.icon" />
              </view>
              <view class="name">{{ subItem.name }}</view>
              <view class="arrow"><wd-icon name="chevron-right" color="rgb(187, 187, 187)" size="40rpx"></wd-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="logout-panel" @click="onLogout">Logout</view>
    </view>
  </scroll-view>

</template>

<script setup lang="ts">
import { ref,reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { NavigateTo,formatAmount, copyToClipboard,removeStorage,getStorage,setStorage} from '@/utils/common';
import { memberInfo } from '@/api/mine';
import { memberLogout } from '@/api/login';
interface AppItem {
  name?: string;
  icon?: string;
  path: string;
}

const state=reactive<{userInfo:any}>({
  userInfo: {},
});

const emit = defineEmits(['onClose']);

const appList = ref([
  {
    name: 'Invitation',
    icon: '/static/icon/app_01.png',
    path: '/pages/mine/invitation'
  },
  {
    name: 'Partners',
    icon: '/static/icon/app_02.png',
    path: '/pages/mine/partners'
  },
  {
    name: 'Recharge',
    icon: '/static/icon/list_03.png',
    path: '/pages/recharge/index'
  },
  {
    name: 'About Us',
    icon: '/static/icon/app_04.png',
    path: '/pages/home/about'
  },
  {
    name: 'Brak Card',
    icon: '/static/icon/app_05.png',
    path: '/pages/bankCard/index'
  },
  {
    name: 'FAQ',
    icon: '/static/icon/app_06.png',
    path: '/pages/home/faq'
  },
  {
    name: 'VIP',
    icon: '/static/icon/app_07.png',
    path: '/pages/mine/vip'
  },
  {
    name: 'Team',
    icon: '/static/icon/app_08.png',
    path: '/pages/team/index'
  },
  {
    name: 'Sign In',
    icon: '/static/icon/list_05.png',
    path: '/pages/home/signIn'
  }
]);

const modeList = ref([
  {
    title: 'Transaction',
    list: [
      {
        name: 'Starting',
        icon: '/static/icon/list_01.png',
        path: '/pages/classify/index'
      },
      {
        name: 'Records',
        icon: '/static/icon/list_02.png',
        path: '/pages/mine/records'
      },
      {
        name: 'Withdrawal',
        icon: '/static/icon/list_05.png',
        path: '/pages/withdrawal/index'
      }
    ]
  },
  {
    title: 'Profile',
    list: [
      {
        name: 'Edit Profile',
        icon: '/static/icon/list_04.png',
        path: '/pages/mine/index'
      },
      // {
      //   name: 'Financial Information',
      //   icon: '/static/icon/list_05.png',
      //   path: '/pges/invitation/indexa'
      // }
    ]
  },
  {
    title: 'Other',
    list: [
      {
        name: 'Contact Us',
        icon: '/static/icon/list_06.png',
        path: '/pages/forget/index'
      },
      {
        name: 'Notifications',
        icon: '/static/icon/list_07.png',
        path: '/pages/message/index'
      }
    ]
  }
])


onLoad(() => {
  const userInfo = getStorage('user') || {};
  state.userInfo = userInfo;
});

//复制
const handleCopy = () => {
  copyToClipboard(state?.userInfo.inviteCode);
}

//跳转界面
const toPage = (row: AppItem) => {
  NavigateTo(row.path);
}

//退出登录
const onLogout = async () => {
  await memberLogout();
  removeStorage('token');
  removeStorage('user');
  NavigateTo('/pages/login/index');
}

//刷新余额
const refreshBalance = async() => {
  const user = await memberInfo();
  const data = {...user.data,avatar:user.data.filePreviewUrl+'/'+user.data.avatar};
  state.userInfo = data;
  setStorage('user', data);
}

</script>

<style lang="scss" scoped>
.sidebar-container {
  position: absolute;
  width: 100%;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #15141f;
  background-image: url(@/static/icon/light_bg.svg);
  background-size: 150%;
  background-position: 0 10px;
  box-sizing: border-box;

  .pd40 {
    padding: 0 40rpx;
  }

  .logo {
    padding: 60rpx 0 40rpx;
    text-align: center;

    image {
      height: 60rpx;
    }
  }

  .user-panel {
    padding: 0 55rpx;
    display: flex;

    .icon {
      border: solid 6rpx #fff;
      border-radius: 100%;

      image {
        width: 104rpx;
        height: 104rpx;
        border-radius: 100%;
      }
    }

    .content {
      flex: 1;
      padding: 0 0 0 30rpx;
      color: #fff;


      .top {
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 30rpx;

        image {
          height: 54rpx;
          margin-left: 10rpx;
        }
      }

      .bottom {
        display: flex;
        align-items: center;
        font-size: 22rpx;

        text {
          font-size: 24rpx;
          font-weight: bold;
          margin: 0 10rpx;
        }
      }
    }
  }

  .progress-panel {
    margin-top: 30rpx;
    text-align: center;
    color: #670cd6;
    font-size: 24rpx;
    display: flex;
    justify-content: center;
  }

  .balance-panel {
    padding: 0 30rpx;
    display: flex;
    margin-top: 16rpx;

    .item {
      width: 50vw;
      color: #fff;
      text-align: center;
      box-sizing: border-box;
      position: relative;

      &:first-child {
        padding: 0 80rpx 0 0;

        &::after {
          content: '';
          position: absolute;
          right: 20rpx;
          top: 0;
          width: 1rpx;
          height: 80rpx;
          background: #333;
        }
      }

      &:last-child {
        padding: 0 0 0 40rpx;
      }

      .num {
        font-size: 24rpx;
        font-weight: bold;
      }

      .name {
        font-size: 22rpx;
        margin-top: 10rpx;
      }
    }
  }

  .app-panel {
    display: flex;
    flex-flow: row wrap;
    margin-top: 10rpx;

    .item {
      width: 180rpx;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      margin-top: 40rpx;

      .icon {
        width: 130rpx;
        height: 130rpx;
        border-radius: 100%;
        background: #2d2a42;
        border: 1px solid #2d2a42;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 70rpx;
        }
      }

      .name {
        color: #fff;
        font-size: 24rpx;
        margin-top: 12rpx;
      }
    }
  }

  .list-panel {
    color: #fff;
    padding: 30rpx 20rpx 0 20rpx;


    .mode {
      margin-top: 40rpx;

      .title {
        font-size: 30rpx;
        font-weight: 600;
      }

      .list {
        margin-top: 20rpx;

        .item {
          height: 100rpx;
          display: flex;
          align-items: center;
          padding: 0 20rpx 0;
          border-bottom: solid 1rpx #c8c7cc;

          &:last-child {
            border-bottom: none;
          }

          .icon {
            width: 80rpx;

            image {
              width: 50rpx;
            }
          }

          .name {
            flex: 1;
            font-size: 26rpx;
          }

          .arrow {
            width: 60rpx;
            display: flex;
            justify-content: flex-end;
          }
        }
      }
    }
  }

  .logout-panel {
    padding: 40rpx 0;
    text-align: center;
    color: red;
    font-size: 30rpx;
    font-weight: 600;
  }

  :deep(.progress) {
    width: 50%;
    margin-left: 20rpx;
  }

  :deep(.wd-progress__outer) {
    height: 10rpx;
  }

  :deep(.wd-progress__label) {
    color: #670cd6;
    font-size: 24rpx;
  }
}
</style>
